<template>
	<view>
		<image src="../../static/me/bg1.jpg" mode="" style="position: fixed;top: 0; left: 0;width: 100vw; height: 100vh;"></image>
		<view style="z-index: 100;position: absolute;width: 100vw;">
			<view class="cell" @tap="toCommonQuention()">
				<view class="content">
					<image src="/static/me/icon/xiaoxi.png" class="icon"></image>
					<view>常见问题</view>
				</view>
				<image src="/static/images/navigator-1.png" class="navigator"></image>
			</view>
			<view class="cell" @tap="toErrorCenter()">
				<view class="content">
					<image src="../../static/me/icon/chucuo.png" class="icon"></image>
					<view>反馈中心</view>
				</view>
			</view>
			<view class="cell" @tap="toAbout()">
				<view class="content">
					<image src="/static/me/icon/bianqian.png" class="icon"></image>
					<view>关于</view>
				</view>
				<image src="/static/images/navigator-1.png" class="navigator"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		toAbout(){
			uni.navigateTo({
				url: "about/about"
			})
		},
		toErrorCenter(){
			uni.navigateTo({
				url: "errorCenter/errorCenter"
			})
		},
		toCommonQuention() {
			uni.navigateTo({
				url: '/pages/services/commonQuestion/index'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.cell {
	padding: 30rpx;
	display: flex;
	align-items: center;
	position: relative;

	.content {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: $font-size-base;
		color: $text-color-base;

		.icon {
			width: 70rpx;
			height: 70rpx;
			margin-right: 10rpx;
		}
	}

	.navigator {
		width: 50rpx;
		height: 50rpx;
		position: relative;
		margin-right: -10rpx;
		flex-shrink: 0;
	}

	&:after {
		content: '';
		position: absolute;
		border-bottom: 2rpx solid #a2a2a2;
		-webkit-transform: scaleY(0.8);
		transform: scaleY(0.8);
		bottom: 0;
		right: 30rpx;
		left: 30rpx;
	}
}
</style>
